<template>
    <view class="page">
        <view class="search-stylist">
            <van-search v-model="queryStylistName" placeholder="请输入美发师名字" @search="onQuery" @clear="onClear" />
        </view>

        <view class="shop-plat">
            <van-tabs @change="queryListByType" title-active-color="#333333" title-inactive-color="#999999" nav-class="nav-class" custom-class="custom-class">
                <van-tab :title="'网约美发师(' + enter + ')'"></van-tab>
                <van-tab :title="'店内美发师(' + sign + ')'"></van-tab>
                <!-- <van-tab title="网约美发师({{hairStylist[0].nexus == 0 && hairStylist.length ? hairStylist.length : 0}})"></van-tab>
      <van-tab title="店内美发师({{hairStylist[0].nexus == 1 && hairStylist.length ? hairStylist.length : 0}})"></van-tab> -->
            </van-tabs>
        </view>

        <view>
            <block v-for="(item, index) in hairStylist" :key="item.userId">
                <view class="stylist-card" @tap.stop.prevent="onQueryDetail" :data-item="item">
                    <view class="stylist-card1">
                        <image class="headerimg" :src="item.headportrait" mode="aspectFill"></image>
                        <view class="stylist-card-second stylelist-detail">
                            <view class="flexbox centers">
                                <text class="shoptitletext1">{{ item.nickname }}</text>
                                <text class="job3">{{ item.position }}</text>
                            </view>
                            <view class="mt-20 score centers">
                                <!-- <image class="clip" src="https://kjyiyue.oss-cn-shenzhen.aliyuncs.com/images/clip.png" /> -->
                                <van-rate :value="item.newscore" allow-half void-icon="star" color="#FF8722" readonly :count="item.showscore" />
                                <text class="">{{ item.score }}/{{ item.commentNumber }}条</text>
                            </view>
                            <view class="mt-20 order">
                                <text>{{ item.practitioneryear ? item.practitioneryear : '从业0年' }} | 总接单{{ item.orderNumber }}</text>
                            </view>
                            <view class="ze mt-20 centers" v-if="item.zecouponDTOs[0]">
                                <image class="icon-28" :src="imgUrl + 'ze.png'"></image>
                                <text>{{ item.zecouponDTOs[0].deduction }}折起</text>
                            </view>
                            <view class="ze mt-20 centers" v-if="item.jiancouponDTOs[0] && !item.zecouponDTOs[0]">
                                <image class="icon-28" :src="imgUrl + 'jian.png'"></image>
                                <text>满{{ item.jiancouponDTOs[0].amount }}减{{ item.jiancouponDTOs[0].deduction }}</text>
                            </view>
                        </view>
                    </view>
                    <view class="card-last">
                        <view class="price" v-if="item.money != null">
                            <text>￥{{ item.money }}起</text>
                        </view>
                        <view>
                            <text class="project mt-20">{{ item.meal }}</text>
                        </view>
                        <view class="mystylists-distince-wrap">
                            <text class="project" v-if="item.distance < 1000">{{ item.distance }}m</text>
                            <text class="project" v-if="item.distance >= 1000">{{ item.newdistance }}km</text>
                            <image class="shopicon" :src="shopimgUrl + 'location.png'"></image>
                        </view>
                    </view>
                </view>
            </block>
            <view class="w-100">
                <van-empty v-if="hairStylist.length == 0 || hairStylist == null" description="暂无美发师" />
            </view>
        </view>
    </view>
</template>

<script>
// pages/my_stylists/my_stylists.js
const app = getApp(); // 引入app

const _request = require('../../utils/request.js'); // 引入require;

export default {
    data() {
        return {
            queryStylistName: '',
            page: 1,
            sign: 0,
            enter: 0,
            hairStylist: [],
            nexus: 0,
            shopimgUrl: app.globalData.shopimgUrl,
            imgUrl: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function () {
        this.setData({
            nexus: 0,
            page: 1,
            hairStylist: []
        });
    },
    onShow: function () {
        this.queryStylist();
        this.getStoreStylistNumber();
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.setData({
            page: this.page + 1
        });
        this.queryStylist();
    },
    methods: {
        // 美发师数量
        getStoreStylistNumber() {
            _request
                .postObj('/store/getStoreStylistNumber', {
                    storeId: uni.getStorageSync('storeId'),
                    nickname: this.queryStylistName
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        this.setData({
                            sign: res.data.data.sign,
                            enter: res.data.data.enter
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        },

        // 店内，平台切换
        queryListByType(event) {
            this.setData({
                nexus: event.detail.index,
                page: 1,
                hairStylist: []
            });
            this.queryStylist();
        },

        // 清空
        onClear: function () {
            this.setData({
                hairStylist: [],
                page: 1,
                queryStylistName: ''
            });
            this.queryStylist();
        },

        // 搜索
        onQuery: function () {
            this.setData({
                page: 1,
                hairStylist: []
            });
            this.queryStylist();
            this.getStoreStylistNumber();
        },

        // 查询美发师列表
        queryStylist() {
            _request
                .postObj('/store/myStylist', {
                    nickname: this.queryStylistName,
                    storeId: uni.getStorageSync('storeId'),
                    userId: uni.getStorageSync('userId'),
                    nexus: this.nexus,
                    page: this.page
                })
                .then((res) => {
                    if (res.data.code === 200) {
                        let list = res.data.data.map((item) => {
                            let distance = (parseInt(item.distance) / 1000).toFixed(1);
                            item.newdistance = Math.round(distance * 10) / 10;
                            let num = item.score.toFixed(1).split('.');

                            if (num[1] > 0) {
                                item.newscore = Number(num[0]) + 0.5;
                                item.showscore = Number(num[0]) + 1;
                            } else {
                                item.newscore = Number(num[0]);
                                item.showscore = Number(num[0]);
                            }

                            if (item.lable) {
                                let money = item.lowestServicePrice.toFixed(2);
                                let moneys = item.lable.match(/\d+(.\d+)?/g).join('');
                                let meal = item.lable.split(moneys)[0];
                                return { ...item, money, meal };
                            } else {
                                return { ...item };
                            }
                        }); // console.log(list)

                        this.setData({
                            hairStylist: this.page > 1 ? [...this.hairStylist, ...list] : list
                        });
                    }
                });
        },

        // 详情
        onQueryDetail(e) {
            const { item } = e.currentTarget.dataset;
            let obj = JSON.stringify(item);
            uni.navigateTo({
                url: '/pages/hairstylistdetails/index?hair=' + encodeURIComponent(obj) + '&status=2'
            });
        }
    }
};
</script>
<style>
.stylist-card {
    display: flex;
    flex-direction: row;
    background: #ffffff;
    box-shadow: 1px 1px 4px 0px rgba(236, 236, 236, 0.4);
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    margin: 20rpx;
    padding: 10rpx;
    box-sizing: border-box;
}

.stylist-card1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    align-content: center;
}

.search-stylist {
    width: 700rpx;
    margin-left: 30rpx;
    /* display: flex; */
    /* justify-content: center; */
}

/* 第二列 */
.stylist-card-second {
    display: flex;
    flex-direction: column;
}
.job3 {
    padding: 0 20rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: #ff8722;
    border-radius: 5px 0px 5px 0px;
    font-size: 20rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 500;
    color: #ffffff;
    margin-left: 10rpx;
    white-space: nowrap;
}
.headerimg {
    width: 160rpx;
    height: 200rpx;
}

.shoptitletext1 {
    height: 50rpx;
    font-size: 32rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 50rpx;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.order {
    height: 34rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    /* color: #FF8722; */
    line-height: 34rpx;
}

.score > text {
    font-size: 24rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 34rpx;
    margin: 0 10rpx 0 6rpx;
}

.card-last {
    display: flex;
    flex-direction: column;
    text-align: right;
    margin: 10rpx;
}

.price {
    color: red;
    font-size: 24rpx;
    font-weight: 500;
}
.mystylists-distince-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    margin: 30rpx 0rpx;
}
.project {
    font-size: 24rpx;
    font-weight: 200;
    line-height: 32rpx;
    text-align: left;
    display: inline-block;
}
.shopicon {
    width: 32rpx;
    height: 32rpx;
    float: right;
}

.font-28 {
    font-size: 28rpx;
}

.font-32 {
    font-size: 32rpx;
}

.clip {
    width: 24rpx;
    height: 22rpx;
}

.shop-plat {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.van-tabs__nav,
.custom-class,
.van-tabs__scroll--line {
    background: #fbfbfb !important;
}
.m-40 {
    margin: 0 40rpx;
}
/* pages/home/index.wxss */
page {
    height: 100%;
    width: 100%;
    background: #fbfbfb;
}
/* 发型师，门店 */
.shop {
    height: 100%;
    width: 670rpx;
    margin: 0 40rpx;
    background: #fbfbfb;
    position: relative;
    top: -40rpx;
}
.top-36 {
    top: 34rpx;
}

.van-tab--active {
    font-size: 32rpx !important;
    font-weight: 900 !important;
}

.nav-class {
    width: 600rpx;
}

.van-tabs__line {
    background: #ff8722 !important;
}

.van-tab {
    height: 100%;
}
.stylelist-detail {
    margin-left: 20rpx;
    height: 200rpx;
    width: 360rpx;
}
</style>
